<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式</title>
</head>

<body>
    <div class="item">
        <p>
            示例字符串
            <input type="text" id="str" value="">
        </p>
        <p>
            筛选部分
            <input type="text" id="setStr" value="">
        </p>
        <p>
            筛选结果
            <input type="text" id="res" value="">
        </p>
        <button id="btn">测试按钮</button>
    </div>
    <script>
        //RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
        //正则表达式简洁且功能强大，通常用来匹配字符串，比如在表单检验用户输入是否合法。它不仅在 javaScript中使用，在众多高级编程语言中都支持。
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var str = document.getElementById('str').value;
            var setStr = document.getElementById('setStr').value;
            // var res = document.getElementById('res').value;
            // for (var i = 0; i < str.length; i++) {
            //     if (str.indexOf(setStr) > -1) {
            //         str = str.replace(setStr, '')
            //         console.log('aaaa')
            //         //把包含特殊字符串转换为空字符
            //     } else { break; }  //如果没有，则退出循环。
            // }
            // // res = str;
            // // console.log(res) 
            // document.getElementById('res').value = str;
            document.getElementById('res').value = str.replace(new RegExp(setStr, 'g'), '')
        }
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .item {
            margin: 250px auto;
            padding: 30px 30px 30px 30px;
            background-color: red;
            width: 300px;
            height: 200px
        }

        p {

            /* width: 50px; */
            height: 50px;
            margin: 10px auto;
            background-color: cadetblue;
            text-align: right;
            line-height: 50px;
            font-size: 18px;
        }

        input {
            width: 200px;
            height: 30px;
            margin: auto;
            font-size: 18px;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin: 0 auto;
            padding: 20px auto;
            background-color: #ccc;
            border: none;
        }
    </style>
</body>

</html>